<script id="vertex-shader" type="x-shader/x-vertex">
    precision mediump float;

    attribute vec4 vPosition;
    varying vec4 fColor;
    uniform mat4 modelViewMatrix;
    uniform mat4 normalMatrix;
    uniform mat4 projectMatrix;
    uniform vec4 lightPosition;
    attribute vec4 aProduct;
    attribute vec4 dProduct;
    attribute vec4 sProduct;
    attribute vec4 vNormal;
    attribute float shininess;

    void main() {
        gl_Position = projectMatrix * modelViewMatrix * vPosition; 
        
        vec3 pos = -(modelViewMatrix * vPosition).xyz;
        vec3 light = (modelViewMatrix * lightPosition).xyz;
        vec3 L = normalize(light);
        vec3 V = normalize(pos);
        vec3 H = normalize(L+V);
        vec3 N = normalize((normalMatrix * vNormal).xyz);

        vec4 ambient = aProduct;
        
        float Kd = max(dot(L, N), 0.0);
        vec4 diffuse = Kd * dProduct;

        float Ks = pow(max(dot(N, H), 0.0), shininess);
        vec4 specular = Ks * sProduct;
        if (dot(L,N)<0.0) {
            specular = vec4(0.0,0.0,0.0,1.0);
        }

        fColor = ambient + diffuse + specular;
        fColor.a = 1.0;
    }
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    varying vec4 fColor;

    void main(){
        gl_FragColor=fColor;
    }
</script>
<script src="js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="js/Common/webgl-utils.js"></script>
<script type="text/javascript" src="js/Common/initShaders.js"></script>
<script type="text/javascript" src="js/Common/MV.js"></script>
<script type="text/javascript" src="Experiment/Experiment3/snowmen.js"></script>
<canvas id="gl-canvas" width="512" height="512">
    Oooooops!
</canvas>
<center><button onclick="lightMove()" style="height:50px; width:400px; font-size:24px;">光源移动/暂停</button></center>